// 获取dom元素
const tbody = document.querySelector('tbody');
const form = document.querySelector('.add-form'); //添加的form标签

const Province = document.querySelector('select[name=province]');//省
const City = document.querySelector('select[name=city]');//市
const County = document.querySelector('select[name=county]');//县
const addModalLabel = document.querySelector('#addModalLabel');//模态框

const btnClose = document.querySelector('.btn-close');//添加学员按钮

const bb = document.querySelector('.bb'); // 重置功能


// 待编辑 操作需要使用到的 id
let id;






getData()// 主渲染
Sheng()//省渲染


async function getData() {

    const result = await axios({
        url: "/student/list",

    })
    // console.log(result.data.data);
    // console.log(Array.isArray(result.data.data));//拿到的是数组

    const html = result.data.data.map((item) => {

        const { id, name, age, sex, group, phone, salary, truesalary, province, city, county } = item;
        return `
<tr>
        <th scope="row">${id}</th>
        <td>${name}</td>
        <td>${age}</td>
        <td>${sex}</td>
        <td>${group}</td>
        <td>${phone}</td>
        <td>${salary}</td>
        <td>${truesalary}</td>
        <td>${province + city + county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm aa" data-id="${id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="${id}">删除</button>
        </td>
      </tr> 
`
    },)
    tbody.innerHTML = html.join('')

}


// 封装省
async function Sheng() {

    /*    const result = await axios({
           url: "/geo/province"
   
       })
       console.log(result);
       const html = result.data.reduce((beforeHTML, item) => {
           return beforeHTML + `<option  value="${item}">${item}</option>`
       }, '<option  value="">--省--</option>');
   
       Province.innerHTML = html */

    getSelectDate("/geo/province", {}, '省', Province)

}

// 省的 change 事件 （市）
Province.addEventListener('change', async function (e) {
    /*  const result = await axios({
         url: "/geo/city",
         params: {
             pname: Province.value
         }
     })
     console.log(result);
 
     const html = result.data.reduce((beforeHTML, item) => {
         return beforeHTML + `<option  value="${item}">${item}</option>`
     }, '<option  value="">--市--</option>')
 
     City.innerHTML = html */
    getSelectDate("/geo/city", { pname: Province.value }, '市', City)

    // 还原 县 
    County.innerHTML = '<option  value="">--县--</option>'



})

// 市 的 change 事件（县）
City.addEventListener('change', async function (e) {
    /* const result = await axios({
        url: "/geo/county",
        params: {
            pname: Province.value,
            cname: City.value,
        }
    })
    const html = result.data.reduce((beforeHTML, item) => {
        return beforeHTML + `<option  value="${item}">${item}</option>`
    }, '<option  value="">--县--</option>');

    County.innerHTML = html
 */
    getSelectDate("/geo/county", { pname: Province.value, cname: City.value }, '县', County)

})



// 统一 封装 城  市   县  
async function getSelectDate(url, params, text, targe) {

    const result = await axios({
        url,
        params,
    })

    const html = result.data.reduce((beforeHTML, item) => {
        return beforeHTML + `<option  value="${item}">${item}</option>`
    }, `<option  value="">--${text}--</option>`);

    targe.innerHTML = html



}



// 添加按钮改文本
btnClose.addEventListener('click', function (e) {
    addModalLabel.innerText = '添加学员'
})


// form 表单的 submit 事件
form.addEventListener('submit', async function (e) {

    // 取消默认行为
    e.preventDefault()

    let result;

    // 快速获取表单的数据
    const data = serialize(form, { hash: true, empty: true })

    if (addModalLabel.innerText === '添加学员') {




        // console.log(data);

        // 非空校验
        for (const key in data) {
            if (!data[key]) {
                toastr.error("请检查你的字段", '注意!!')
                return
            }

        }

        // 发送数据
        result = await axios({
            url: "/student/add",
            method: "post",
            data,
        })

        console.log(result);

        if (result.data.code === 0) {

            // 友好提示框
            toastr.success(result.data.message, '恭喜')
            $('#addModal').modal('hide')

            // 重新渲染
            getData()

            // 重置表单
            form.reset();
        }
    } else if (addModalLabel.innerText === '修改学员') {


        data.id = id
        console.log(data);
        result = await axios({
            url: "/student/update",
            method: "put",
            data,

        })
        if (result.data.code === 0) {
            // 友好提示框
            toastr.success(result.data.message, '恭喜')

            // 关闭模态框
            $('#addModal').modal('hide')

            // 重新渲染
            getData()

            // 重置表单
            form.reset();
        }





    }


})


// 删除  跟 编辑 模块
tbody.addEventListener('click', async function (e) {
    const target = e.target
    id = target.dataset.id
    if (target.classList.contains('delete-btn')) {
        // console.log(123);
        if (confirm('您确定删除吗？')) {


            // console.log(id);
            const result = await axios({
                url: "/student/delete",
                method: "delete",
                params: { id }

            })
            if (result.data.code === 0) {
                toastr.success('删除成功！', '好家伙')

                // 重新渲染
                getData()

            }

        }
        // 编辑
    } else if (target.classList.contains('aa')) {
        // console.log(id);
        // 弹出模态框
        $('#addModal').modal('show')
        addModalLabel.innerText = '修改学员'

        console.log(id);

        const result = await axios({
            url: "/student/one",
            params: {
                id
            }

        })
        console.log(result);
        const obj = result.data.data

        //提前 初始化城市  跟 县
        await getSelectDate("/geo/city", { pname: obj.province }, '城市', City)
        await getSelectDate("/geo/county", { pname: obj.province, cname: obj.city }, '县', County)

        for (const key in obj) {

            // 拿到该学员的全部dom  元素
            const formEle = document.querySelector(`[name=${key}]`);

            // 除去 性别
            if (formEle && key !== 'sex') {
                formEle.value = obj[key];
            }
        }
        // 单独拿到性别的dom 元素
        document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true;

    }


})

// 重置 功能
bb.addEventListener('click', function (e) {
    form.reset();

    City.innerHTML = `<option  value="">--城市--</option>`
    County.innerHTML = `<option  value="">--县--</option>`

})
